<template>
  <div class="reportAndCalendar">
    <el-card class="!rounded-16px overflow-visible">
      <el-skeleton :loading="loading" animated>
        <Echart
          :width="chartWidth"
          :height="chartHeight"
          :options="getPieOptionsData(0)"
          @click="handleOpenUrl(baseHost + '/goview/#/chart/preview/12')"
        />
      </el-skeleton>
    </el-card>
    <el-card class="!rounded-16px overflow-visible">
      <el-skeleton :loading="loading" animated>
        <Echart
          :width="chartWidth"
          :height="chartHeight"
          :options="getPieOptionsData(1)"
          @click="handleOpenUrl(baseHost + '/goview/#/chart/preview/10')"
        />
      </el-skeleton>
    </el-card>
    <el-card class="!rounded-16px overflow-visible">
      <el-skeleton :loading="loading" animated>
        <Echart
          :width="chartWidth"
          :height="chartHeight"
          :options="educationChartOption"
          @click="handleOpenUrl('/edu-hub/school/statisticalCenter/humanResources')"
        />
      </el-skeleton>
    </el-card>
    <el-card class="!rounded-16px flex-1">
      <CalendarPanel />
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { EChartsOption } from 'echarts'
import { barOptions, lineOptions, pieOptions } from '../../echarts-data'
import CalendarPanel from './calendarPanel.vue'
import { cloneDeep } from 'lodash-es'
import { getViewportPx } from '@/utils/formatter'
import { statisticalCenterApi } from '@/api/school/statisticalCenter/index'
import { usePieOptions } from '@/hooks/chart/usePieOptions'

const baseHost = import.meta.env.VITE_BASE_URL
const { push } = useRouter()
const loading = ref(false)
const pieOptionsData: any = reactive<EChartsOption>(pieOptions) as EChartsOption
const pieDataMap = [
  {
    title: '儿童兴趣发展',
    data: [
      { value: 367, name: '种植区' },
      { value: 735, name: '攀爬区' },
      { value: 580, name: '沙水区' },
      { value: 484, name: '运动区' },
      { value: 300, name: '大型玩具区' }
    ]
  },
  {
    title: '教师画像',
    type: 'bar',
    data: [
      { value: 23, name: '师德师风' },
      { value: 35, name: '班级管理' },
      { value: 37, name: '教学质量' },
      { value: 28, name: '个人发展' },
      { value: 41, name: '定量评价' },
      { value: 43, name: '定性评价' }
    ]
  },
  {
    title: '人力资源中心',
    formatter: '{c}人',
    data: [
      { value: 2, name: '高级教师' },
      { value: 36, name: '一级教师' },
      { value: 24, name: '二级教师' },
      { value: 12, name: '高级保育员' },
      { value: 9, name: '中级保育员' }
    ]
  }
]

const chartHeight = getViewportPx(350)
const chartWidth = getViewportPx(284)

const humanChartData: any = ref({}) // 人力资源中心数据

const getChartData = (baseData) => {
  return baseData
    ? Object.entries(baseData).map(([key, value]) => {
        return {
          name: key,
          value
        }
      })
    : []
}

const educationChartOption = computed(() => {
  return usePieOptions(getChartData(humanChartData.value?.educationDistribution), {
    title: {
      text: '人力资源中心'
    }
  }).baseOptions
})

const initData = async () => {
  try {
    loading.value = true
    humanChartData.value = await statisticalCenterApi.getTeacherReport('')
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}
const getPieOptionsData = (index: number) => {
  const item = pieDataMap[index]
  const baseData: any = item.type === 'bar' ? cloneDeep(barOptions) : cloneDeep(pieOptions)
  console.log(baseData, '---baseData')

  baseData.series[0].data = item.data
  if (item.formatter) {
    baseData.series[0].label.formatter = item.formatter
  }
  if (item.type === 'bar') {
    baseData.xAxis.data = item.data.map((item: any) => item.name)
  }
  baseData.title.text = item.title
  return baseData
}
const handleOpenUrl = (url: string) => {
  window.open(`${url}`, 'homeBlank')
}
onMounted(() => {
  initData()
})
</script>
<style lang="scss" scoped>
.reportAndCalendar {
  display: flex;
  column-gap: 20px;
  width: 100%;

  :deep() {
    .el-card__body {
      padding: 14px 16px;
    }
  }
}
</style>
